<template>
    <div class="app-header-box">
        <div class="ahb-logo">
            <img src="/favicon.svg" alt="logo">
        </div>
        <div class="ahb-list">
            <div
                v-for="(item, index) in list"
                :key="index"
                :class="{
                  'ahb-l-item': true,
                  'ahb-l-item-active': activeItemIndex === index,
                }"
                @click="itemClick(item, index)"
            >
              <template v-if="item.type === 'dropdown'">
                <el-dropdown>
                    <span class="el-dropdown-link">
                      {{ item.name }}
                      <el-icon
                          class="el-icon--right"
                          color="red"
                          style="transform: translate(-3px, 2px)"
                      >
                        <arrow-down />
                      </el-icon>
                    </span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item
                          v-for="(_item,_index) in item.list"
                          :key="_index"
                      >
                        {{ _item.label }}
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </template>
              <template v-else>
                <NuxtLink :to="item.path">{{  item.name  }}</NuxtLink>
              </template>
            </div>
        </div>
        <div class="ahb-login">
            <el-button type="primary">登录</el-button>
            <el-button>注册</el-button>
        </div>
    </div>
</template>

<script>
    import {ArrowDown} from "@element-plus/icons-vue";

    export default {
        name: 'AppHeaderBox',
        components: {ArrowDown},
        data() {
            return {
                activeItemIndex: 0,
                list: [
                    { name: '首页', path: '/' },
                    { name: 'setup页面', path: '/setup' },
                    { name: 'Readme', path: '/readme' },
                    { name: '嵌套路由', path: '/embed' },
                    { name: '单页面(embed)', path: '/single' },
                    { name: '用户列表', path: '/users' },
                    {
                      name: '下拉测试',
                      path: '',
                      list: [
                        { label: '下拉测试1', path: '', url: '' },
                        { label: '下拉测试2', path: '', url: '' }
                      ],
                      type: 'dropdown'
                    },
                ]
            }
        },
        methods: {
          itemClick(item, index) {
            if (item.type === 'dropdown') {

            } else {
              this.activeItemIndex = index
            }
          }
        }
    }
</script>

<style lang="scss">
.app-header-box{
    border: 1px solid #666;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    .ahb-logo{
        cursor: pointer;
        img{
            height: 60px;
        }
    }
    .ahb-list{
        display: flex;
        margin: 0 20px;
        .ahb-l-item-active{
          display: inline-block;
        }
        .ahb-l-item{
            padding: 10px;
            border: 1px solid #666;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            margin-right: 10px;
            border-radius: 4px;
            &:nth-last-child(1){
                margin-right: 0;
            }
            &:hover{
                background-color: #409eff;
                border: 1px solid #409eff;
                color: #fff;
            }
        }
    }
    .ahb-login{
        display: block;
    }

}
</style>
